<script>
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import calendar from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar';
  import dayjs from 'dayjs';
  import sheep from '@/sheep';

  export default {
    name: 'second_popup',
    components: { ImageAvater },
    data() {
      return {
        info: {},
        popupDeployment: {
          background: '#FFFFFF',
          isShowEdit: false,
        },
        memberInfo: {},
        isShow: false,
      };
    },
    props: {
      remarkFlag: {
        type: Boolean,
        default: true,
      },
      editFlag: {
        type: Boolean,
        default: true,
      },
    },
    computed: {
      // 公历日期
      publicDate() {
        if (!!this.info) {
          if (this.info.type == 1) {
            if (!this.info.birthday) {
              return '';
            }
            let dt = calendar.lunar2solar(Number(this.info.birthday.split('-')[0]), Number(this.info.birthday.split('-')[1]), Number(this.info.birthday.split('-')[2]), this.info.isLeapMonth == 2 ? true : false);
            console.log(dt);
            return `${dt.cYear}年${dt.cMonth}月${dt.cDay}日`;
          } else {
            if (!this.info.birthday) {
              return '';
            }
            return dayjs(this.info.birthday).format('YYYY年MM月DD日');
          }
        }
      },
      // 阴历日期
      lunarDate() {
        if (!!this.info) {
          if (this.info.type == 1) {
            if (!this.info.birthday) {
              return '';
            }
            let dt = calendar.lunar2solar(Number(this.info.birthday.split('-')[0]), Number(this.info.birthday.split('-')[1]), Number(this.info.birthday.split('-')[2]), this.info.isLeapMonth == 2 ? true : false);
            return `(${dt.gzYear}年) ${dt.IMonthCn}${dt.IDayCn}`;
          } else {
            if (!this.info.birthday) {
              return '';
            }
            let dt = calendar.solar2lunar(Number(this.info.birthday.split('-')[0]), Number(this.info.birthday.split('-')[1]), Number(this.info.birthday.split('-')[2]));
            return `(${dt.gzYear}年) ${dt.IMonthCn}${dt.IDayCn}`;
          }
        }
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    created() {
      uni.$on('setValue', (name) => {
        this.info.remark = name;
      });
    },
    methods: {
      openPopup(obj) {
        console.log('选中的用户=>', obj);
        this.popupDeployment.background = !!obj.background ? obj.background : '#FFFFFF';
        this.popupDeployment.isShowEdit = !!obj.isShowEdit ? true : false;
        this.info = !!obj.memberInfo ? obj.memberInfo : {};
        this.memberInfo = !!obj.selectInfo ? obj.selectInfo : {};
        this.info.uid = obj.uid;
        this.$refs.second_popup.open();
        this.isShow = true;
      },
      goChat() {
        uni.setStorageSync('CHATINFO', JSON.stringify(this.info));
        this.$nav.navigateTo('/pages/chat/index/index');
      },
      closePopup() {
        if (this.isShow) {
          this.$refs.second_popup.close();
          this.isShow = false;
        }
      },
      // 跳转修改备注页面
      goEdit() {
        uni.setStorageSync('remarksInformation', JSON.stringify(this.memberInfo));
        // this.$nav.navigateTo('/pages/familyPage/modifyNote/index')
        this.$emit('goEdit', this.info);
      },
      setCilpText() {
        uni.setClipboardData({
          data: `尊姓大名：${this.info.username}
拾亲号：${this.info.sq_code}`,
          showToast: '复制成功',
        });
      },
    },
  };
</script>

<template>
  <uni-popup ref="second_popup" :mask-click="false">
    <view class="second_popup" :style="{
      background:popupDeployment.background
    }">
      <view class="second_popup_background">
        <image :src="popupDeployment.background" class="second_popup_background_image" mode="widthFix"></image>
      </view>
      <view class="second_popup_icon">
        <image :src="`${IMG_URL}/index/key.png`" class="second_popup_icon_image"></image>
      </view>
      <view class="second_popup_header flex align-center" style="padding-top: 47rpx">
        <text class="second_popup_header_text ml_41">查看信息</text>
        <image class="first_popup_header_image" :src="`${IMG_URL}/index/popupClose.png`" mode="widthFix"
               @click="closePopup"></image>
      </view>
      <view class="second_popup_content flex flex-column align-center" style="padding-bottom: 47rpx">
        <view class="second_popup_content_avatar flex align-center mt_25 w-100">
          <view>
            <image-avater :src="info.avatar" :width="165" :height="165" is-order :borderWidth="8"
                          borderColor="#FFFFFF"></image-avater>
          </view>
          <view class="flex align-center">
            <view class="ml_20">
              <view class="second_popup_content_name flex align-center">
                <text class="second_popup_content_name_text" style="white-space: nowrap;">{{ info.username }}</text>
                <view class="second_popup_content_card flex align-center justify-center ml_15" v-if="remarkFlag">
                  <text class="second_popup_content_card_text">{{ !!info.remark ? info.remark : '未设置' }}</text>
                </view>
                <image :src="`${IMG_URL}/index/edit_remark.png`" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
                       v-if="popupDeployment.isShowEdit && editFlag" @click="goEdit"></image>
                <!--                <view class="second_popup_content_name_chat flex align-center justify-center ml_15"-->
                <!--                      @click.stop="goChat">-->
                <!--                  发消息-->
                <!--                </view>-->
              </view>
              <view class="second_popup_content_code flex align-center">
                <text class="second_popup_content_code_text" style="white-space: nowrap">拾亲号：{{ info.sq_code }}
                </text>
                <view class="familyEdit_familyName_left flex align-center justify-center ml_10" @click="setCilpText">
                  <text class="familyEdit_familyName_left_text" style="color: #FF4206;white-space: nowrap;">复制</text>
                  <image class="familyEdit_familyName_left_image ml_4"
                         :src="`${IMG_URL}/index/replication.png`"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="second_popup_content_gap flex align-center mt_35 w-100" style="height: 120rpx;">
          <text class="second_popup_content_gap_title ml_28">生日</text>
          <view class="flex flex-column">
            <text class="second_popup_content_gap_content ml_35" style="line-height: 38rpx" :style="{
              color:info.type == 2 ? '#000000' : '#9F9F9F',
              fontSize:info.type == 2 ? '34rpx' : '30rpx'
            }">{{ publicDate }}
            </text>
            <text class="second_popup_content_gap_content ml_35" style="line-height: 38rpx" :style="{
              color:info.type == 1 ? '#000000' : '#9F9F9F',
              fontSize:info.type == 1 ? '34rpx' : '30rpx'
            }">{{ lunarDate }}
            </text>
          </view>
        </view>
        <view class="second_popup_content_gap flex align-center mt_35 w-100" style="height: 80rpx;">
          <text class="second_popup_content_gap_title ml_28">属相</text>
          <text class="second_popup_content_gap_content ml_35">{{ info.animal }}</text>
        </view>
        <view class="second_popup_content_gap flex align-center mt_35 w-100" style="height: 80rpx;">
          <text class="second_popup_content_gap_title ml_28">星座</text>
          <text class="second_popup_content_gap_content ml_35">{{ info.constellation }}</text>
        </view>
        <view class="second_popup_content_gap flex align-center mt_35 w-100" style="height: 80rpx;">
          <text class="second_popup_content_gap_title ml_28">年龄</text>
          <text class="second_popup_content_gap_content ml_35">{{ info.age }}周岁</text>
        </view>
        <view class="second_popup_content_gap mt_35">
          <view class="mt_20 ml_28 mr_28 mb_20">
            <text class="second_popup_content_gap_title">签名：</text>
            <text class="second_popup_content_gap_content">{{
                !!info.autograph ? info.autograph : '这个人很懒，什么都没填写～'
              }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
  .second_popup {
    width: 552rpx;
    //height: 725rpx;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
    background: #FFFFFF;
    //overflow: hidden;
    position: relative;

    .second_popup_background {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;

      .second_popup_background_image {
        width: 100%;
      }
    }

    .second_popup_icon {
      position: absolute;
      top: 0;
      right: 0;

      .second_popup_icon_image {
        width: 147rpx;
        height: 147rpx;
      }
    }

    .second_popup_header {
      width: 552rpx;
      border-radius: 15rpx 15rpx 0rpx 0rpx;
      position: relative;

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;
      }

      .first_popup_header_image {
        position: absolute;
        width: 65rpx;
        height: 65rpx;
        right: -20rpx;
        top: 13rpx;
        transform: translateY(-50%);
      }
    }

    .second_popup_content {
      margin: 0 41rpx;
      position: relative;

      .second_popup_content_name {
        //width: 470rpx;

        .second_popup_content_name_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #4B4B4B;
        }

        .second_popup_content_card {
          height: 30rpx;
          background: #FF7950;
          border-radius: 15rpx 15rpx 15rpx 15rpx;

          .second_popup_content_card_text {
            padding: 0 8rpx;
            white-space: nowrap;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
          }
        }

        .second_popup_content_name_chat {
          width: 98rpx;
          height: 38rpx;
          background: #FF4206;
          border-radius: 57rpx 57rpx 57rpx 57rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }

      .second_popup_content_code {
        //width: 470rpx;

        .second_popup_content_code_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #696969;
        }
      }

      .second_popup_content_avatar {
        //position: absolute;
        //right: 25rpx;
        //top: -35rpx;
      }

      .second_popup_content_gap {
        width: 470rpx;
        background: #F8F8F8;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .second_popup_content_gap_title {
          white-space: nowrap;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #4B4B4B;
        }

        .second_popup_content_gap_content {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #9F9F9F;
        }
      }
    }
  }

  .familyEdit_familyName_left {
    .familyEdit_familyName_left_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #9F9F9F;
    }

    .familyEdit_familyName_left_image {
      width: 34rpx;
      height: 34rpx;
    }
  }
</style>